<template>
  <a-form-item
    :label="props.itemData.label"
    :name="props.itemData.name"
    v-bind="validateInfos[props.itemData.value]"
  >
    <a-input
      style="width: 85%"
      v-if="props.itemData.type == 'text'"
      placeholder="请输入"
      allow-clear
      autocomplete="off"
      v-model:value.string="dataValue"
      @blur="inputUpdateValue"
    />
    <a-textarea
      style="width: 85%"
      v-if="props.itemData.type == 'textarea'"
      placeholder="请输入"
      allow-clear
      autocomplete="off"
      v-model:value.string="dataValue"
      @blur="inputUpdateValue"
    />
    <a-select
      style="width: 85%"
      v-if="
        props.itemData.type == 'selectajax' || props.itemData.type == 'select'
      "
      optionFilterProp="label"
      :options="props.itemData.options"
      allow-clear
      autocomplete="off"
      placeholder="请选择"
      v-model:value.string="dataValue"
      @change="updateValue"
    />
    <a-select
      style="width: 85%"
      v-if="props.itemData.type == 'selectajaxlike'"
      optionFilterProp="label"
      :options="props.itemData.options"
      :filter-option="filterOption"
      show-search
      allow-clear
      autocomplete="off"
      placeholder="请选择"
      v-model:value.string="dataValue"
      @change="updateValue"
    />
    <a-date-picker
      style="width: 85%"
      v-if="props.itemData.type === 'date'"
      value-format="YYYY-MM-DD HH:mm:ss"
      show-time
      autocomplete="off"
      placeholder="请选择日期"
      v-model:value="dataValue"
      @change="dateUpdateValue"
    />
    <a-radio-group
      style="width: 85%"
      v-model:value="dataValue"
      @change="changeRadio"
      v-if="props.itemData.type === 'radio'"
    >
      <a-radio
        :value="item.value"
        v-for="(item, index) in props.itemData.params"
        :key="index"
        >{{ item.label }}</a-radio
      >
    </a-radio-group>
    <template v-if="props.itemData.value === 'allocation_cause'">
      <img
        src="@/assets/set.png"
        style="width: 30px; height: 30px; margin-left: 20px; cursor: pointer"
        @click="showList()"
      />
    </template>
    <template v-if="props.itemData.value === 'settle_type'">
      <div class="flex align-center margin-top-30" v-if="dataValue == 1">
        现付
        <a-input
          class="flex1 margin-x-15"
          placeholder="请输入"
          allow-clear
          autocomplete="off"
          v-model:value.string="data.price"
        />
        元
      </div>
      <div class="margin-top-30" v-else-if="dataValue == 2">
        <div class="flex align-center margin-bottom-15">
          料结
          <a-input
            class="flex1 margin-x-24"
            placeholder="请输入"
            allow-clear
            autocomplete="off"
            v-model:value.string="data.weight"
          />
          克
        </div>
        <a-form-item label="货品成色" style="margin-bottom: 0px">
          <a-select
            optionFilterProp="label"
            :options="options"
            allow-clear
            autocomplete="off"
            placeholder="请选择"
            v-model:value.string="data.gold_category_code"
            @change="optionsUpdate"
          />
        </a-form-item>
      </div>
      <div class="margin-top-30" v-else-if="dataValue == 3">
        <div class="flex align-center margin-bottom-15">
          <div class="flex1 flex align-center margin-right-30">
            现付
            <a-input
              class="flex1 margin-x-15"
              placeholder="请输入"
              allow-clear
              autocomplete="off"
              v-model:value.string="data.price"
            />
            元
          </div>
          <div class="flex1 flex align-center margin-right-15">
            料结
            <a-input
              class="flex1 margin-x-15"
              placeholder="请输入"
              allow-clear
              autocomplete="off"
              v-model:value.string="data.weight"
            />
            克
          </div>
        </div>
        <a-form-item label="货品成色" style="margin-bottom: 0px">
          <a-select
            optionFilterProp="label"
            :options="options"
            allow-clear
            autocomplete="off"
            placeholder="请选择"
            v-model:value.string="data.gold_category_code"
            @change="optionsUpdate"
          />
        </a-form-item>
      </div>
    </template>
  </a-form-item>
</template>

<script setup>
  import { ref, reactive, onMounted, nextTick, watch } from 'vue';
  import dayjs from 'dayjs';
  import { get_gold_list } from '@/api/jewelry/receipts_purchase';

  const props = defineProps({
    itemData: Object,
    dataValue: String,
    validateInfos: Object,
    estraparmas: Object,
    actionStatus: String
  });
  const emit = defineEmits(['update:value', 'blur', 'getData', 'action']);
  const options = ref([]);
  const dataValue = ref(null);

  const data = reactive({
    price: '',
    weight: '',
    gold_category_code: ''
  });

  watch(
    () => [
      props.dataValue,
      data.price,
      data.weight,
      data.gold_category_code,
      props.estraparmas
    ],
    (newValue, oldValue) => {
      dataValue.value = newValue[0];
      if (props.actionStatus == 'edit') {
        data.price = newValue[1] ? newValue[1] : newValue[4].price;
        data.weight = newValue[2] ? newValue[2] : newValue[4].weight;
        data.gold_category_code = newValue[3]
          ? newValue[3]
          : newValue[4].gold_category_code;
      }
      if (props.itemData.value == 'settle_type') {
        console.log(data);
        emit('getData', data);
      }
    }
  );

  const showList = () => {
    emit('action');
  };

  //下拉框带搜索功能
  const filterOption = (input, option) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  if (props.itemData.value == 'settle_type') {
    get_gold_list({ page: 1, limit: 9999 }).then((res) => {
      res.row_list.map((item) => {
        options.value.push({
          value: item.code,
          label: item.name
        });
      });
    });
  }

  const inputUpdateValue = () => {
    emit('update:value', dataValue.value.toString());
  };
  /* select选择框诗句改变事件 */
  const updateValue = () => {
    emit('update:value', dataValue.value.toString());
  };
  const dateUpdateValue = (value, dateString) => {
    emit('update:value', dataValue.value);
  };
  const changeRadio = () => {
    if (props.itemData.value == 'settle_type') {
      data.price = '';
      data.weight = '';
      data.gold_category_code = '';
    }
    emit('update:value', dataValue.value.toString());
  };
  const optionsUpdate = () => {
    console.log(data);
    //emit('update:value', props.dataValue.toString());
  };

  defineExpose({
    data
  });
</script>

<style lang="less" scoped></style>
